<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0; padding: 0; border: none;}
			ul, li {list-style: none;}
			#box {
				width: 600px;
				height: 300px;
				margin: 100px auto;
				overflow: hidden;
				border: 10px solid blue;
				position: relative;
			}
			#list1 {
				width: 3100px;
				height: 300px;
				position: absolute;
				left: 0;
				top: 0;
			}
			#list1 li, #list1 img {
				width: 600px;
				height: 300px;
			}
			#list1 li {
				float: left;
			}
			#list2  {
				width: 150px;
				height: 20px;
				position: absolute;
				right: 30px;
				bottom: 30px;
			}
			#list2 li {
				width: 18px;
				height: 18px;
				border: 1px solid black;
				background: yellow;
				text-align: center;
				line-height: 18px;
				margin-left: 5px;
				float: left;
				cursor: pointer;
			}
			
			#list2 li.active {
				background: green;
			}
			
			#prev, #next {
				width: 50px;
				height: 22px;
				background: orange;
				position: absolute;
				top: 45%;
				cursor: pointer;
			} 
			#prev {
				left: 10px;
			}
			#next {
				right: 10px;
			}
		</style>
		<script src="js/jquery-1.12.3.js"></script>
		<script type="text/javascript">
			$(function(){
				//先获取轮播图的数据
				$.get("json/lunbotu.json",function(data){
					var arr = data;
					
					for(var i=0;i<arr.length;i++){
						var obj = arr[i];
						$("<li><img src= "+ obj.img+" ></li>").appendTo("#list1");
						var li = $("<li>"+ (i+1) +"</li>").appendTo("#list2");
						if(i==0){
							li.addClass("active")
						}
					}
					//轮播图
					lunbo();
				})
				//
				function lunbo(){
					var list1 = $("#list1");
					var list2 = $("#list2");
					var li1 = $("#list1 li");
					var li2 = $("#list2 li");
					//
					li1.first().clone(true).appendTo(list1);
					var size = $("#list1 li").size();
					list1.width(600*size);
					//
					//开启定时器
					var i=0;
					var timer = setInterval(function(){
						i++;
						move();
					},2000)
					//
					function move(){
						if(i<0){
							list1.css("left",-600*(size-1));
							i=size-2;
						}
						if(i>=size){
							list1.css("left",0);
							i=1;
						}
						list1.stop().animate({left:-600*i},500)
						li2.eq(i).addClass("active").siblings().removeClass();
						if(i==size-1){
							li2.eq(0).addClass("active").siblings().removeClass();
						}
						//
						$("#prev").click(function(){
							i--;
							move();
						})
						$("#next").click(function(){
							i++;
							move();
						})
						//
						li2.mouseenter(function(){
						i = $(this).index();
						move();
						})
						
						$("#box").hover(function(){
							clearInterval(timer);
						}, 
						function(){
							timer = setInterval(function(){
								i++;
								move();
							}, 2000);
						})
						//
						
					}
				}
				
				
				
			})
		</script>
	</head>
	<body>
		<div id="box">
			<ul id="list1">
				
			</ul>
			<ul id="list2">
				
			</ul>
			<div id="prev">上一页</div>
			<div id="next">下一页</div>
		</div>
	</body>
</html>
